<script setup lang="ts">
import { ref } from 'vue';
import { RouterLink, RouterView } from 'vue-router';
import NavTrends from '@/views/common/NavTrends.vue';
import Header from '@/views/common/Header.vue';

import { useCounterStore } from '@/stores/counter';
import { storeToRefs } from 'pinia';
import { onBeforeMount } from 'vue';
const counterStore = useCounterStore(); // pinia
const { theme } = storeToRefs(counterStore); // 保持响应式

const selfTheme = ref<string>(''); // 当前主题

onBeforeMount(() => {
    let localTheme = localStorage.getItem('theme') || '';
    if (localTheme) {
        selfTheme.value = localTheme;
        counterStore.setTheme(selfTheme.value); // 保持pinia缓存
    }
    if (theme.value) {
        selfTheme.value = theme.value; // 从pinia获取
    }
});
</script>

<template>
    <div class="main" :data-theme="theme">
        <div class="nav_wrapper">
            <NavTrends />
        </div>

        <div class="content_wrapper">
            <Header />
            <RouterView />
        </div>
    </div>
</template>
